<template>
<div style="padding:50px">
  <el-button style="margin-bottom:20px" @click="created">创建课程</el-button>
  <gc-spread-sheets
    :hostClass='hostClass'
  >
    <gc-worksheet
      :dataSource="dataTable"
      :autoGenerateColumns = 'autoGenerateColumns'
    >
      <gc-column
        :width="width"
        :dataField="'price'"
        :visible = 'visible'
        :formatter = 'formatter'
        :resizable = 'resizable'
      ></gc-column>
    </gc-worksheet>
    </gc-spread-sheets>
  </div>
</template>
<script>
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import  '@grapecity/spread-sheets-vue'
export default {
data(){
  return {
    hostClass:'spread-host',
    autoGenerateColumns:true,
    width:800,
    visible:true,
    resizable:true,
    formatter:"$ #.00"
  }
},
computed:{
  dataTable(){
    let dataTable = [];
    for (let i = 0; i < 42; i++) {
      dataTable.push({price: i + 0.56})
    }
    return dataTable
  }
},
methods:{
  created(){
   
  }
}
}
</script>
<style scoped>
.spread-host {
width: 800px;
height: 600px;
}
</style>